@extends('home.layouts')
@section('content')

<div class="pet_content_block">
    <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article" data-am-paragraph="{ tableScrollable: true, pureview: false }">
        <h1 class="pet_article_title">{{$article['title']}}</h1>
        <div class="pet_article_user_time">发表于：{{date('Y-m-d H:i:s',$article['created_at'])}}</div>

        {!! $article['content'] !!}
    </article>
    <ul class="like_share_block">
        <li><a class="link_share_button" href="javascript:;"><i class="iconfont share_ico_link">&#xe62f;</i>{{$article['views']*10}}</a></li>
        <li>
                @if($article['uid']==Session::get('user')['id'] && !empty(Session::get('user')))
                <a class="link_share_button" style="color: red" onclick="star({{$article['id']}},1)" id="starButton"> 已收藏</a>
                @else
                <a class="link_share_button" onclick="star({{$article['id']}},1)" id="starButton">收藏</a>
                @endif
        </li>
        <li>
                @if(in_array(Session::get('user')['id'],$guan))
                <a class="link_share_button" id="guanzhuz" style="color: red" onclick="star({{$article['user_id']}},3)">已关注作者</a>
                @else
                <a class="link_share_button" id="guanzhuz" onclick="star({{$article['user_id']}},3)">关注作者</a>
                @endif
            </li>
        <li class="-mob-share-ui-button -mob-share-open" style="background: white;font-weight:normal">
            <a class="link_share_button">分享</a>
        </li>
    </ul>
    <!--MOB SHARE BEGIN-->
    <div class="-mob-share-ui" style="display: none">
        <ul class="-mob-share-list">
            <li class="-mob-share-weibo"><p>新浪微博</p></li>
            <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
            <li class="-mob-share-weixin"><p>微信</p></li>
            <li class="-mob-share-qzone"><p>QQ空间</p></li>
            <li class="-mob-share-qq"><p>QQ好友</p></li>
            <li class="-mob-share-renren"><p>人人网</p></li>
            <li class="-mob-share-kaixin"><p>开心网</p></li>
            <li class="-mob-share-douban"><p>豆瓣</p></li>
            <li class="-mob-share-youdao"><p>有道笔记</p></li>
        </ul>
        <div class="-mob-share-close">取消</div>
    </div>
    <div class="-mob-share-ui-bg"></div>
    <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=19a7f55a5d2f8"></script>
    <!--MOB SHARE END-->
</div>
<div class="pet_comment_list">
    <div class="pet_comment_list_wap"><div class="pet_comment_list_title">精彩评论</div>

        <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab" >
            <ul class="am-tabs-nav am-cf pet_comment_list_title_tab">
                <li class="am-active"><a href="[data-tab-panel-0]">人气</a></li>
                <li class=""><a href="[data-tab-panel-1]">最新</a></li>
                <li class=""><a href="[data-tab-panel-2]">最早</a></li>
            </ul>
            <div class="am-tabs-bd pet_pl_list">
                <div data-tab-panel-0 class="am-tab-panel am-active">
                    @foreach($comments['like'] as $c1)
                        <div class="pet_comment_list_block">
                            <div class="pet_comment_list_block_l"><img src="{{$c1['avatar']}}-40X40" alt=""></div>
                            <div class="pet_comment_list_block_r">
                                <div class="pet_comment_list_block_r_info">{{$c1['username']}}</div>
                                <div class="pet_comment_list_block_r_text"><a style="color: black" href="{{url('commentdetail/'.$c1['id'])}}">{{$c1['comment']}}</a></div>
                                <div class="pet_comment_list_block_r_bottom">
                                    <div class="pet_comment_list_bottom_info_l">{{date('Y-m-d H:i:s',$c1['created_at'])}}</div>
                                    <div class="pet_comment_list_bottom_info_r">
                                            <span onclick="star({{$c1['id']}},4)"><i
                                                        @if(in_array($c1['id'],$starCommentIds))
                                                        style="color:red;"
                                                        @endif
                                                        id="hand_{{$c1['id']}}" class="iconfont">&#xe631;</i><span id="likkkkk_{{$c1['id']}}">{{$c1['like']}}</span> </span>
                                        <span onclick="replyComment({{$c1['id']}})"
                                              data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"> 回复({{$c1['replycount']}})</span></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div data-tab-panel-1 class="am-tab-panel ">
                    @foreach($comments['new'] as $c1)
                        <div class="pet_comment_list_block">
                            <div class="pet_comment_list_block_l"><img src="{{$c1['avatar']}}-40X40" alt=""></div>
                            <div class="pet_comment_list_block_r">
                                <div class="pet_comment_list_block_r_info">{{$c1['username']}}</div>
                                <div class="pet_comment_list_block_r_text"><a style="color: black" href="{{url('commentdetail/'.$c1['id'])}}">{{$c1['comment']}}</a></div>
                                <div class="pet_comment_list_block_r_bottom">
                                    <div class="pet_comment_list_bottom_info_l">{{date('Y-m-d H:i:s',$c1['created_at'])}}</div>
                                    <div class="pet_comment_list_bottom_info_r">
                                            <span onclick="star({{$c1['id']}},4)"><i
                                                        @if(in_array($c1['id'],$starCommentIds))
                                                        style="color:red;"
                                                        @endif
                                                        id="hand_{{$c1['id']}}" class="iconfont">&#xe631;</i><span id="likkkkk_{{$c1['id']}}">{{$c1['like']}}</span> </span>
                                        <span onclick="replyComment({{$c1['id']}})"
                                              data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"> 回复({{$c1['replycount']}})</span></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div data-tab-panel-2 class="am-tab-panel ">
                    @foreach($comments['old'] as $c1)
                        <div class="pet_comment_list_block">
                            <div class="pet_comment_list_block_l"><img src="{{$c1['avatar']}}-40X40" alt=""></div>
                            <div class="pet_comment_list_block_r">
                                <div class="pet_comment_list_block_r_info">{{$c1['username']}}</div>
                                <div class="pet_comment_list_block_r_text"><a style="color: black" href="{{url('commentdetail/'.$c1['id'])}}">{{$c1['comment']}}</a></div>
                                <div class="pet_comment_list_block_r_bottom">
                                    <div class="pet_comment_list_bottom_info_l">{{date('Y-m-d H:i:s',$c1['created_at'])}}</div>
                                    <div class="pet_comment_list_bottom_info_r">
                                            <span onclick="star({{$c1['id']}},4)"><i
                                                        @if(in_array($c1['id'],$starCommentIds))
                                                        style="color:red;"
                                                        @endif
                                                        id="hand_{{$c1['id']}}" class="iconfont">&#xe631;</i><span id="likkkkk_{{$c1['id']}}">{{$c1['like']}}</span> </span>
                                        <span onclick="replyComment({{$c1['id']}})"
                                              data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"> 回复({{$c1['replycount']}})</span></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<div class="pet_article_like">
    <div class="pet_article_like_title">猜你喜欢</div>



    <div class="pet_content_main pet_article_like_delete">
        <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
            <div class="am-list-news-bd">
                <ul class="am-list">
                    <?php $currentId=$article['id'];?>
                    <!--缩略图在标题右边-->
                    @foreach($articles as $a)
                        @if($currentId!=$a['id'])
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
                        <div class="pet_list_one_info">
                            <div class="pet_list_one_info_l">
                                <div class="pet_list_one_info_ico"><img src="
                                        @if(empty($a['avatar']))
                                    {{asset('assets/images/home/a1.png')}}
                                    @else
                                    {{$a['avatar']}}-40X40
                                                    @endif
                                            " alt=""></div>
                                <div class="pet_list_one_info_name">
                                    @if(empty($a['username']))
                                        大佬
                                    @else
                                        {{$a['username']}}
                                    @endif
                                </div>
                                <small> &nbsp;&nbsp;{{date('Y-m-d H:i:s',$a->created_at)}}发布</small>
                            </div>
                            <div class="pet_list_one_info_r">
                                <div class="pet_list_tag pet_list_tag_xxs">{{$a->category}}</div>
                            </div>
                        </div>
                        <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
                            <h3 class="am-list-item-hd pet_list_one_bt"><a href="{{url('articledetail/'.$a['id'])}}" class="">{{$a['title']}}</a></h3>
                            <div class="am-list-item-text pet_list_one_text">
                                {{mb_substr(strip_tags(trim(strip_tags($a['content']))),0,150,'utf-8')}}
                            </div>

                        </div>
                        <div class="am-u-sm-4 am-list-thumb">
                            <a href="{{url('articledetail/'.$a['id'])}}" class="">
                                @if(!empty($a['cover']))
                                    <img src="{{$a['cover']}}-300X230" class="pet_list_one_img" style="height: 76px;width: 100px;" alt=""/>
                                @else
                                    <img src="{{asset('assets/images/home/q4.jpg')}}" class="pet_list_one_img" style="height: 76px;width: 100px;" alt=""/>
                                @endif
                            </a>
                        </div>
                    </li>
                        @endif
@endforeach

                </ul>
            </div>

        </div>

    </div>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog">
        <div class="am-modal-hd"><span id="commentTitle">发表评论</span>
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <input type="hidden" name="cid" value="">
        <div class="am-modal-bd">
            <div class="am-form-group">
                <textarea class="commentTextarea" rows="5" id="doc-ta-1" style="border: beige;width: 100%"></textarea>
            </div>
            <a class="am-btn am-btn-xs am-btn-danger" style="float: left;margin-left: 15%;" data-am-modal-close>取消</a>
            <button class="am-btn am-btn-xs am-btn-primary" style="float: right;margin-right: 15%;" onclick="comment({{$article['id']}})">提交</button>
        </div>
    </div>
</div>
    <span data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"
            style="position:absolute; bottom:60px;right: 3px; position:fixed;
            width: 30px;;right: 10px;background-color: #0dc6d4;font-size: 10px;
            padding: 4px 9px 4px 9px;font-weight: bold;color: whitesmoke">评论</span>

    @endsection

@section('javascript')
    <script>
        function star(id,type){
            $.post('{{url('star')}}',{'_token':'{{csrf_token()}}','id':id,'type':type},function(res){
                if(res.status){
                    if(type==1){
                        $("#starButton").css('color','red').text('已收藏');
                    }else if(type==4){
                        $("#hand_"+id).css('color','red');
                        $("#likkkkk_"+id).text('').text($("#likkkkk_"+id).text()+1);
                    }else if(type==3){
                        /*关注作者*/
                        $("#guanzhuz").css('color','red').text('已关注作者');
                    }
                }
                layer.msg(res.msg);
            })
        }

        function comment(id){
            var comments=$(".commentTextarea").val();
            if($("input[name='cid']").val()==''){
                var postData={'_token':'{{csrf_token()}}','comment':comments,'cid':id,'type':1};
            }else{
                var reply=$("input[name='cid']").val();
                var postData={'_token':'{{csrf_token()}}','comment':comments,'cid':id,'reply':reply,'type':1};
            }
            $("input[name='cid']").val('');
            $.post('{{url('insertcomment')}}',postData, function (res) {
                if(res.status){
                    $("#doc-modal-1").modal('close');
                    layer.msg(res.msg);
                    location.reload();
                }else{
                    layer.msg(res.msg);
                }
            })
        }

        function replyComment(cid){
            $("#commentTitle").text('').text('回复评论');
            $("input[name='cid']").val(cid);
        }
    </script>
    @endsection